<template>
    <div>
        <common-header></common-header>
        <main v-if="detail">
            <div class="detail_header">
                <div class="con_box">
                    <div class="top">
                        <div class="detail_title">
                            <img src="/static/images/detail_title.png" alt="">
                            <div class="title">实绩管理</div>
                        </div>
                    </div>
                    <div class="position">
                        <img src="/static/images/addr1.png" alt="">
                        <span>您现在的位置：</span>
                        <a href="#/">首页></a>
                        <a href="#/manage">实绩管理></a>
                        <a :href="url">{{name+'>'}}</a>
                        <span class="now">{{detail.title}}</span>
                    </div>
                </div>
            </div>
            <div class="con_box">
                <div class="art_title">
                        <div class="title">
                            {{detail.title}}
                        </div>
                        <div class="time">发布时间：{{detail.create_time}}</div>
                </div>
                <!-- <div class="detail_con ql-editor" v-html="detail.content" v-if="userinfo&&userinfo.group_id!=1">
                    
                </div>
                <div class="fabu_con" v-else>
                    <div class="fb_item">
                       
                        <div class="fb_box">
                            <el-upload class="avatar-uploader" action="http://jdxy.ituohong.cn/admin/upload" name="file" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
                            </el-upload>
                            <quill-editor v-model="detail.content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
                            </quill-editor>
                        </div>
                    </div>
                    <div class="submit_btn" @click="submit" style="background:linear-gradient(to bottom,#FFE5B5, #DBA43A, #FFE5B5);">
                        上传材料
                    </div>
                </div> -->
                <el-button  type="primary"  @click="editinfo()">新增+</el-button>
                <div class="cl_box">
                    <div class="cl_header">
                        <ul class="h_list">
                            <li class="h_item">
                                标题
                            </li>
                            <li class="h_item">
                                状态
                            </li>
                            <li class="h_item">操作</li>
                        </ul>
                    </div>
                    <div class="cl_body">
                        <ul class="b_list" v-for="item in flist" :key="item.id">
                            <li class="b_item">{{item.title}}</li>
                            <li class="b_item">{{item.status==0?'待审核':item.status==1?'已通过':'未通过'}}</li>
                            <li class="b_item">
                                <el-button  type="primary"  @click="editinfo(item)">查看
                                </el-button>
                            </li>
                        </ul>
                    </div>
                </div>
                <el-dialog
                    :visible.sync="dialogVisible"
                    width="80%"
                    :before-close="handleClose">
                    <ul class="form_list" v-if="edit">
                        <li class="form_item">
                            <span class="form_title">
                                标题：
                            </span>
                            <input type="text" placeholder="请输入标题" v-model="edit.title">
                        </li>
                        <li class="form_item" v-if="edit.id">
                            <span class="form_title">
                                状态：
                            </span>
                            <span>{{edit.status==0?'待审核':edit.status==1?'已通过':'未通过'}}</span>
                        </li>
                        <li class="form_item">
                            <span class="form_title">
                                图片：
                            </span>
                           <div class="img">
                                <el-upload
                                class="upload-demo"
                                list-type="picture-card"
                                :show-file-list="false"
                                action="http://jdxy.ituohong.cn/admin/upload"
                                :on-success="handelSuccess"
                                >
                                <img v-if="edit.image" :src="edit.image" class="avatar">

                                </el-upload>
                           </div>
                        </li>
                    </ul>
                    <span slot="footer" class="dialog-footer">
                        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                        <el-button type="primary" @click="sub">提交</el-button>
                    </span>
                </el-dialog>
            </div>
        </main>
        <common-footer :type="2"></common-footer>
    </div>
</template>
<script>
import CommonHeader from '@/components/commonheader'
import CommonFooter from '@/components/commonfooter'
import CommonBanner from '@/components/commonBanner'
import commonNav from '@/components/commonNav'
import { quillEditor } from 'vue-quill-editor'
  
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                      //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
  [{ 'align': [] }], // 居中
  ['clean'],                                       // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]
export default {
    data(){
        return{
            detail:null,
            name:'',
            url:'',
            list:[],
            flist:[],
            prev:null,
            next:null,
            detailid:'',
            img:'',
            edit:{
                title:'',
                image:''
            },
            userinfo:null,
            dialogVisible: false,
            content:'',
            editorOption: {
                placeholder: '请在这里输入',
                theme: 'snow', //主题 snow/bubble
                modules: {
                history: {
                    delay: 1000,
                    maxStack: 50,
                    userOnly: false
                },
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                    image: function (value) {
                        if (value) {
                        // 调用element的图片上传组件
                        document.querySelector('.avatar-uploader input').click()
                        } else {
                        this.quill.format('image', false)
                        }
                    }
                    }
                }
                }
            },
        }
    },
    created(){
        console.log(this.$route.query)
        this.name = this.$route.query.name
        this.url = this.$route.hash
        this.detailid = this.$route.query.id
        this.getdata(this.$route.query.id)
        this.getuserInfo()
        
    },
    mounted(){
        this.getlist()
        this.getfilelist()
    },
    watch:{
        $route:{
            handler(newval,oldval){
                if(newval){
                    this.detailid = newval.query.id
                    this.getdata(newval.query.id)
                    this.getlist()
                }
            },
            deep:true
        }
    },
    methods:{
        editinfo(item){
            if(item){
                this.edit = item
            }else{
                this.edit={
                title:'',
                image:''
            }
            }
            this.isedit = true
            this.dialogVisible = true
            
        },
        sub(){
            if(this.edit.id){
                this.$api.post('getCpcphaseFileEdit',{
                    cid:this.detailid,
                    ...this.edit
                }).then(res=>{
                    if(res.code === 200){
                        this.$message({
                            message:res.message,
                            type:'success'
                        })
                        this.getfilelist()
                        this.dialogVisible = false
                    }else{
                        this.$message({
                            message:res.message,
                            type:'warning'
                        })
                        
                    }
                })
            }else{
                this.$api.post('getCpcphaseFileAdd',{
                    cid:this.detailid,
                    ...this.edit
                }).then(res=>{
                    if(res.code === 200){
                        this.$message({
                            message:res.message,
                            type:'success'
                        })
                        this.getfilelist()
                        this.dialogVisible = false
                    }else{
                        this.$message({
                            message:res.message,
                            type:'warning'
                        })
                        
                    }
                })
            }
           
        },
        handleClose(done) {
            done()
        },
        add(){

        },
        // 文件上传成功时
        handelSuccess(res, file, fileList) {
            console.log("上传成功", res, file, fileList);
            this.edit.image = res.data.url
        },
        // 文件上传时
        handelProgress(event, file, fileList) {
            console.log("上传时", event, file, fileList);
        },
        submit(){
            if(!this.detail.content){
                alert('提交内容不能为空！')
            }else{
                let params={
                    id:this.detail.id,
                    "content":this.detail.content,
                }
                this.$api.post('editCpcphase',params).then(res=>{
                    if(res.code === 200){
                        alert(res.message)
                        this.$router.go(-1)
                    }else{
                        alert(res.message)
                        this.$router.go(-1)
                    }
                })
            }
            
        },
        getfilelist(){
            let params={
                    id:this.detailid
                }
            this.$api.post('getCpcphaseFileList',params).then(res=>{
                    if(res.code === 200){
                        console.log('这是一段数据：',res.data)
                        this.flist = res.data.data
                    }
                })
        },
        getuserInfo(){
            this.$api.get('getUserInfo',{
                headers:{
                    Authorization:localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.code === 200){
                    localStorage.setItem('userInfo',JSON.stringify(res.data.data))
                    this.userinfo = res.data.data
                }else{
                    alert(res.message)
                    localStorage.removeItem('token')
                    localStorage.removeItem('userInfo')
                    this.$router.push({path:'/login'})
                }
            })
        },
        getdata(id){
            this.$api.post('getCpcphase',{
                id:id
            }).then(res=>{
                console.log(res)
                if(res.code === 200){
                    this.detail = res.data.data
                }else{
                    alert(res.message)
                    this.$router.go(-1)
                }
                
            })
        },
        getlist(){
            this.$api.post('getArticleList',{
                    "searchKey":"",
                    "sort":"sort",
                    limit:10000,
                    "type":this.name
            }).then(res=>{
                 res.data.list.forEach((item,index)=>{
                        if(item.id == this.detailid){
                            this.prev = res.data.list[index-1]
                            this.next = res.data.list[index+1]
                            console.log(this.prev,this.next)
                        }
                 })
            })
        },

        // 失去焦点
    onEditorBlur (editor) { },
    // 获得焦点
    onEditorFocus (editor) { },
    // 开始
    onEditorReady (editor) { },
    // 值发生变化
    onEditorChange (editor) {
      this.detail.content = editor.html;
      console.log(editor);
    },
    beforeUpload (file) {console.log(file) },
    uploadSuccess (res, file, fileList) {
      // 获取富文本组件实例
      console.log(res)
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }
    },
    components:{
        CommonBanner,
        CommonFooter,
        CommonHeader,
        commonNav,
        quillEditor
    }
}
</script>
<style lang="scss" scoped>
 @import  '@/assets/css/common.scss';
.con_box{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
    .cl_box{
        width: 100%;
        height: auto;
        .cl_header{
            width: 100%;
            height: 62px;
            .h_list{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e0e0e0;
                .h_item{
                    flex: 1;
                    height: 100%;
                    line-height: 62px;
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    font-weight: bolder;
                }
            }
        }
        .cl_body{
            width: 100%;
            height: auto;
            .b_list{
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                .b_item{
                    flex: 1;
                    height: 62px;
                    line-height: 62px;
                    text-align: center;
                    font-size: 14px;
                    color: #666;
                    a{
                        display: inline-block;
                        width: 90px;
                        height: 40px;
                        border-radius: 10px;
                        text-align: center;
                        line-height: 40px;
                        color: #fff;
                        background: #345BE9;
                    }
                }
            }
        }
    }
}
.form_list{
    width: 100%;
    height: auto;
    .form_item{
        width: 100%;
        min-height: 62px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .img{
            width: 150px;
            height: 70px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            width: 120px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        input{
            width: 300px;
            height: 60px;
            font-size: 14px;
            border: none;
            border-bottom: 1px solid #e0e0e0;
            outline: none;
        }

    }
}
@media screen and (max-width: 900px) {
    .con_box{
        width: 100%;
        margin: 0 auto;
        padding: 0 .3rem;
        box-sizing: border-box;
        padding-bottom: .5rem;
        .cl_box{
        width: 100%;
        height: auto;
        .cl_header{
            width: 100%;
            height: 1rem;
            .h_list{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e0e0e0;
                .h_item{
                    flex: 1;
                    height: 100%;
                    line-height: 1rem;
                    text-align: center;
                    font-size: .28rem;
                    color: #333;
                    font-weight: bolder;
                }
            }
        }
        .cl_body{
            width: 100%;
            height: auto;
            .b_list{
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e0e0e0;
                .b_item{
                    flex: 1;
                    height: .8rem;
                    line-height: .8rem;
                    text-align: center;
                    font-size: .24rem;
                    color: #666;
                    a{
                        display: inline-block;
                        width: 1.6rem;
                        height: .6rem;
                        border-radius: .1rem;
                        text-align: center;
                        line-height: .6rem;
                        color: #fff;
                        background: #345BE9;
                    }
                }
            }
        }
    }
    }
    .form_list{
        width: 100%;
        height: auto;
        .form_item{
            width: 100%;
            min-height: 1rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .img{
                width: 2rem;
                height: 1rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            span{
                width: 1.2rem;
                height: .82rem;
                line-height: .82rem;
                text-align: center;
                font-size: .28rem;
                font-weight: bold;
                color: #333;
            }
            input{
                width: 4rem;
                height: .8rem;
                font-size: .24rem;
                border: none;
                border-bottom: 1px solid #e0e0e0;
            }

        }
    }
}
</style>